<template>
  <div class="flag">
    <div
      style="margin-bottom: 20px; font-size: 14px; background: rgb(218, 231, 245); color: rgb(100, 112, 118); padding: 12px 20px;">
      黑名单影响范围：本店铺直接销售发展的订单和由本店铺生产发货的订单（订单处中我的订单和生产发货中的订单）</div>


      <div class="kflex">
        <el-input style="width: 300px;" type="text" placeholder="请填写关键词" v-model="search.address"></el-input>
        <el-button type="primary" round @click="getlist" style="margin: 0 20px;">搜索</el-button>

        <el-button type="primary" round @click="add">添加关键词</el-button>


        <el-button type="primary" round @click="daochu" style="margin: 0 20px;">导出</el-button>
      </div>

      <el-table :data="tableData" border style="width: 100%; margin-top: 20px;" v-loading="loading">
            <el-table-column  prop="id" label="序号"></el-table-column>
            <el-table-column  prop="created_at" label="添加时间"></el-table-column>

            <el-table-column  prop="address" label="关键词"></el-table-column>
            <el-table-column  label="操作" >
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="bianji(scope.row)">编辑</el-button>
                <el-button size="mini" type="text" @click="shanchu(scope.row)">删除</el-button>
              </template>
            </el-table-column>
      </el-table>

      <div style="text-align:right; margin-top:20px">
        <el-pagination background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye"
          :page-size="search.pagesize" :total="total"></el-pagination>
      </div>

      <el-dialog  :title="title" center  :visible.sync="log" width="600px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true">

            <div class="kflexcc">
              <div class="f1" style="text-align: right;">关键词：</div>
              <div class="f2"><el-input style="width: 300px;" type="text" placeholder="请输入关键词" v-model="zu.address"></el-input></div>
            </div>

            <span slot="footer" class="dialog-footer">

              <el-button type="primary" round @click="tijiao" :disabled="ing" v-if="!zu.id">确定</el-button>
              <el-button type="primary" round @click="bianjigo" :disabled="ing" v-if="zu.id">确定</el-button>
            </span>
      </el-dialog>

    <!-- <div style="margin: 20px 0; font-size: 18px;">该黑名单仅影响本店铺</div> -->
  </div>
</template>

<script>
  import all from '@/assets/all.js'
  import axios from "axios";
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  export default {
    name: 'flag',
    components: {
      UploadExcelComponent
    },
    data() {
      return {
        loading:true,
        zu: {
          id:"",
          address:"",
          black_type:1
        },
        tableData:[],
        total:0,
        search: {
          pagesize: 20,
          page: 1,
          type:3,
          mobile:"",
          address:"",
          black_type:1
        },
        log:false,
        ing:false
      }
    },
    created() {
      this.getlist()

    },
    methods: {
      daochu:function(){
        axios.get('/api/plan-market/export/black/list',{params:{type:3,address:this.search.address,black_type:1}})
          .then(response => {
            if (response.data.msg.code == 0) {
              location.href = location.origin + '/' + response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      bianji:function(item){
        this.title = '编辑黑名单'
        this.zu = {
          id:item.id,
          type:3,
          address: item.address,
          black_type:1
        }
        this.log = true
      },
      add:function(){
        this.title = '添加黑名单'
        this.zu = {
          id:"",
          address: "",
          black_type:1
        }
        this.log = true
      },

      bianjigo:function(){
        this.ing = true
        axios.post('/api/plan-market/black/update',this.zu)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("修改成功");
              this.getlist()
              this.log = false
              setTimeout(()=>{
                this.ing = false
              },500)
            } else {
              this.$message.error(response.data.msg.info);
              setTimeout(()=>{
                this.ing = false
              },500)
            }
          })
      },

      shanchu:function(item){
        this.$confirm('确认删除此黑名单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/black/delete',{id:item.id,type:3})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },

      getlist:function(){
        axios.get('/api/plan-market/black/list',{params:this.search})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
              this.loading = false
            }
          })
      },

      tijiao: function() {
        this.ing = true
        axios.post('/api/plan-market/black/info/add',{address:this.zu.address,black_type:1})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success("发布成功");
              this.log = false
              this.getlist()
              setTimeout(()=>{
                this.ing = false
              },500)
            } else {
              this.$message.error(response.data.msg.info);
              setTimeout(()=>{
                this.ing = false
              },500)
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .flag {
    padding: 20px;

    /deep/ .el-button--primary {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }



    /deep/ #drop .el-button--primary {
      background-color: #2974FF;
      border: 1px #2974FF solid; margin-left: 20px;
      border-radius: 20px;
    }

    // /deep/ .el-button--primary {
    //   background: #EEF7FF;
    //   border: 1px #EEF7FF solid;
    // }

    .flex {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .f1 {
        width: 120px;
        text-align: right;
      }
    }


  }
</style>
